<template>
    <div class="mian" v-loading="false" element-loading-text="数据加载中">
        <div class="box">
            <div class="header">
              
                是否已回复：<el-select v-model="value" placeholder="请选择" size="mini"  style="width:200px;margin:0 10px">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                
                <el-button size="mini" type="primary" @click="chaxun()">查询</el-button>
            </div>
            <div style="margin-bottom: 10px;">
              
            </div>
            <el-table  :data="tableData" 
                style="width: 100%"  
                border class="content-table" 
                :header-cell-style="headerStyle" 
                :cell-style="cellStyle">
                <el-table-column prop="id" label="会员ID" width="80px"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="number" label="问题内容"></el-table-column>
                <el-table-column prop="number" label="回复内容"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="drawer=true">详情</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
            <el-pagination
            class="page-box"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage1"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total">
            </el-pagination>
        </div>

        <el-drawer
        title="详情"
        :visible.sync="drawer"
        direction="rtl"
        size="40%"
        :before-close="handleClose">
            <div class="drawerLayOut">
                <el-descriptions :column="2" size="medium" border style="margin-bottom: 20px;">
                    <el-descriptions-item :label-style="{ width: '100px' }">
                        <template slot="label">会员ID</template>
                        <span>123</span>
                    </el-descriptions-item>
                    <el-descriptions-item :label-style="{ width: '100px' }">
                        <template slot="label">创建时间</template>
                        <span>13111111111</span>
                    </el-descriptions-item>
                    <el-descriptions-item :label-style="{ width: '100px' }">
                        <template slot="label" >问题内容</template>
                        <span>2025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-012025-01-01</span>
                    </el-descriptions-item>
                </el-descriptions>
                <el-form ref="form" :model="form" label-width="80px" label-position="top">
                    <el-form-item label="回复">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [
            {id:1,number:13111111111,createTime:"2025-01-01",dueTime:"2026-01-01"},
            {id:2,number:13111111111,createTime:"2025-01-01",dueTime:"2026-01-01"},
            {id:3,number:13111111111,createTime:"2025-01-01",dueTime:"2026-01-01"},
            {id:4,number:13111111111,createTime:"2025-01-01",dueTime:"2026-01-01"},
            {id:5,number:13111111111,createTime:"2025-01-01",dueTime:"2026-01-01"},
            {id:6,number:13111111111,createTime:"2025-01-01",dueTime:"2026-01-01"},
            {id:7,number:13111111111,createTime:"2025-01-01",dueTime:"2026-01-01"},
            {id:8,number:13111111111,createTime:"2025-01-01",dueTime:"2026-01-01"},
            {id:9,number:13111111111,createTime:"2025-01-01",dueTime:"2026-01-01"},
            {id:10,number:13111111111,createTime:"2025-01-01",dueTime:"2026-01-01"}
        ],
        currentPage1: 1,
        total:0,
        options: [
          { value: 0, label: '全部'}, 
          { value: 1, label: '酒店'},
          { value: 2, label: '场馆'},
          { value: 3, label: '旅行社'},
          { value: 4, label: '会务公司'},
          { value: 5, label: '景点'},
          { value: 6, label: '礼品'},
          { value: 7, label: '供应服务商'},
          { value: 8, label: '广告公司'},
          { value: 9, label: '其他'},
        ],
        memberType: 0,
        memberName:"",
        drawer:true,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          money:""
        },
        rules: {
            money: [
                { required: true, message: '请输入充值金额', trigger: 'blur' },
            ],
            region: [
                { required: true, message: '请选择支付方式', trigger: 'change' }
            ],
            date: [
                { type: 'date', required: true, message: '请选择到期日期', trigger: 'change' }
            ],
        },
        options: [{
          value: '是',
          label: '是'
        }, {
          value: '否',
          label: '否'
        }],
        value: ''
        
      }
    },
    mounted () {
      this.gethotel()
    },
    methods: {
      downloadClick() {
        window.open(location.origin+"/api/static/template/微信导入模板.xls")
      },
      headerStyle () {
        return {
            background:'#20344a',
            color:"#fff",
            textAlign: 'center',
            fontWeight: 'bold',
            borderRight: 'none',
            fontSize: '14px',
            padding: '5px 0'
        }
      },
      cellStyle () {
          return {
              color:"#000",
              textAlign: 'center',
              borderRight: 'none',
              fontSize: '12px',
              padding: '5px 0'
          }
      },
      handleCurrentChange(val) {
        this.currentPage1 = val;
        this.gethotel()
      },
      gethotel () {
        let data = {
          memberName: this.memberName,
          pageNum: this.currentPage1,
          pageSize: 10,
          memberType:this.memberType
        }
        api.list(data).then(res => {
          if (res.code==1) {
            this.tableData = res.data.records
            this.tableData.map((item,index) => {
              if (item.memberType == 0) {
                item.type = "全部"
              } else if (item.memberType == 1) {
                item.type = "酒店"
              } else if (item.memberType == 2) {
                item.type = "场馆"
              } else if (item.memberType == 3) {
                item.type = "旅行社"
              } else if (item.memberType == 4) {
                item.type = "会务公司"
              } else if (item.memberType == 5) {
                item.type = "景点"
              } else if (item.memberType == 6) {
                item.type = "礼品"
              } else if (item.memberType == 7) {
                item.type = "供应服务商"
              } else if (item.memberType == 8) {
                item.type = "广告公司"
              } else if (item.memberType == 9) {
                item.type = "其他"
              }
            })
            this.total = Number(res.data.total)
          } else {
            this.tableData = []
          }
        })
      },
      chaxun () {
        this.gethotel()
      },
      selectChange (item) {
        console.log(item)
        let data = {
          id:item.Id,
          season:item.Season
        }
        api.updetaseason(data).then(res => {
          if (res.code == 200) {
              this.$message({
                  message: "修改成功",
                  type: 'success'
              });
          } else{
            this.$message.error(res.data);
          }
        })
      },
      handleEdit(index, row) { // 编辑
        this.centerDialogVisible = true
      },
      handleDelete(index, row) {  // 删除
        
      },
      handleClose() {
        this.drawer = false
      }
    },
  }
</script>

<style scoped>
.mian {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #fff;
}
.box {
    padding: 0 10px;
}
.header {
    display: flex;    
    height: 50px;
    align-items: center;
}
.add-btn {
    margin-right: 20px;
}
.content-table {
    margin-bottom: 20px;
}

.page-box {
    margin-bottom: 15px;
}
.upload-box {
  /* display: flex; */
  overflow: hidden;
}
.upload {
  width: 149px;
  height: 160px;
  border: 1px solid #ccc;
  font-size: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}
.upload input {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 0;
}
.upload .close {
  font-size: 20px;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #000;
  color: #fff;
}
.upload img {
  width: 100%;
  height: 100%;
}
.map {
  width: 80%;
  height: 300px;
  position: relative;
}
.dialog-box {
  width: 100%;
  overflow: hidden;
  /* display: flex;
  justify-content: center;
  flex-wrap: wrap; */
}
.image_path_class {
    width: 100px;
  height: 100px;
}
.drawerLayOut {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
